<template lang="html">
  <div :val="value_">
    <el-radio-group v-model="type">
      <div>
        <el-radio label="1">每月</el-radio>
      </div>
      <div>
        <el-radio label="5">不指定</el-radio>
      </div>
      <div>
        <el-radio label="2">周期</el-radio>
        <span style="margin-left: 10px; margin-right: 5px;">从</span>
        <el-input-number size="mini" @change="type = '2'" :max="59" :min="1" v-model="cycle.start"></el-input-number>
        <span style="margin-left: 5px; margin-right: 5px;">至</span>
        <el-input-number size="mini" @change="type = '2'" :max="59" :min="1" v-model="cycle.end"></el-input-number>
        月
      </div>
      <div>
        <el-radio label="3">循环</el-radio>
        <span style="margin-left: 10px; margin-right: 5px;">从</span>
        <el-input-number size="mini" @change="type = '3'" :max="12" :min="1" v-model="loop.start"></el-input-number>
        <span style="margin-left: 5px; margin-right: 5px;">开始，每</span>
        <el-input-number size="mini" @change="type = '3'" :max="12" :min="1" v-model="loop.end"></el-input-number>
        月执行一次
      </div>  
      <div>
        <el-radio label="4">指定</el-radio>
        <el-checkbox-group @change="type = '4'" v-model="appoint">
        <div v-for="i in 2" :key="i" style="margin-left: 10px; line-height: 25px;">
          <el-checkbox v-for="j in 10" v-if="parseInt((i - 1) + '' + (j - 1)) < 13 && !(i === 1 && j === 1)" :key="j" :label="(i - 1) + '' + (j - 1)"></el-checkbox >
        </div>
      </el-checkbox-group >
      </div>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: "1", // 类型
      cycle: {
        // 周期
        start: 1,
        end: 12
      },
      loop: {
        // 循环
        start: 0,
        end: 0
      },
      week: {
        // 指定周
        start: 0,
        end: 0
      },
      work: 0,
      last: 0,
      appoint: [] // 指定
    };
  },
  computed: {
    value_() {
      let result = [];
      switch (this.type) {
        case "1": // 每秒
          result.push("*");
          break;
        case "2": // 年期
          result.push(`${this.cycle.start}-${this.cycle.end}`);
          break;
        case "3": // 循环
          result.push(`${this.loop.start}/${this.loop.end}`);
          break;
        case "4": // 指定
          result.push(this.appoint.join(",") ? this.appoint.join(",") : "?");
          break;
        case "6": // 最后
          result.push(`${this.last === 0 ? "" : this.last}L`);
          break;
        default:
          // 不指定
          result.push("?");
          break;
      }
      this.$emit("child-say", result.join(""));
      return result.join("");
    }
  }
};
</script>

<style lang="css">
.el-checkbox + .el-checkbox {
  margin-left: 10px;
}
</style>
